<template>
  <div class="bubbleCartridge">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
// 加载 Cesium
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
var viewer // 视图
export default {
  mounted() {
    this.initHandle()
  },
  methods: {
    /* *********************初始化 start********************* */
    initHandle() {
      var viewerOption = {
        geocoder: false, // 地理位置查询定位控件
        homeButton: false, // 默认相机位置控件
        timeline: false, // 时间滚动条控件
        navigationHelpButton: false, // 默认的相机控制提示控件
        fullscreenButton: false, // 全屏控件
        scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
        baseLayerPicker: false, // 底图切换控件
        animation: false // 控制场景动画的播放速度控件
      }
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjA2ZDQ2ZS02NTA4LTQ2NTItODE1My1kZjE3MjBkMjFkNzAiLCJpZCI6NDM5NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MDcyNzI4Nn0.L7P8pJponZfYjdsGnEw2hIHd2AN0h-SuYl6XvzOwLeA'
      viewer = new Cesium.Viewer('cesiumContainer', viewerOption)

      // 隐藏 LOGO 版权
      viewer._cesiumWidget._creditContainer.style.display = 'none'

      // 去掉entity的点击事件 start
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 去掉entity的点击事件 end

      // 添加广告牌
      var monitorEntity = viewer.entities.add({
        name: 'video',
        position: Cesium.Cartesian3.fromDegrees(109.44, 32.11, 30.0),
        point: { // 点
          pixelSize: 0,
          HeightReference: 1000
        },
        label: { // 文字标签
          text: '文字标签',
          font: '500 30px Helvetica', // 15pt monospace
          scale: 0.5,
          style: Cesium.LabelStyle.FILL,
          fillColor: Cesium.Color.WHITE,
          pixelOffset: new Cesium.Cartesian2(-8, -35), // 偏移量
          showBackground: true,
          backgroundColor: new Cesium.Color(0.5, 0.6, 1, 1.0)
        },
        billboard: { // 图标
          image: require('../../../images/blueCamera.png'),
          width: 50,
          height: 50
        }
      })
      // 视角定位
      viewer.flyTo(monitorEntity, {
        duration: 2,
        offset: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-30),
          range: 720
        }
      })
      viewer.scene.postProcessStages.fxaa.enabled = false// 去锯齿 使文字清晰

      var handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      var infoDiv = '<div id="trackPopUp" class="trackPopUp">' +
                       '<div id="trackPopUpContent" class="leaflet-popup" style="top:5px;left:0;">' +
                         '<a class="leaflet-popup-close-button" href="#">×</a>' +
                         '<div class="leaflet-popup-content-wrapper">' +
                           '<div id="trackPopUpLink" class="leaflet-popup-content"></div>' +
                         '</div>' +
                       '</div>' +
                 '</div>'
      $('#cesiumContainer').append(infoDiv)

      // 绑定鼠标单击
      handler3D.setInputAction(function (movement) {
        var pick = viewer.scene.pick(movement.position)
        console.log(pick, 'pick')
        if (pick && pick.id) {
          $('#trackPopUp').show()
          var content = '<div>' + pick.id._name + '</div><table ><tbody>'
          // for (var i = 0; i < pick.id._monitoItems.length; i++) {
          content += '<tr><td>' + 'pick.id._monitoItems[i].name' + ':</th><td>' + 'pick.id._monitoItems[i].value + pick.id._monitoItems[i].units' + '</td></tr>'
          // }
          content += '</tbody></table>'
          var obj = { position: movement.position, content: content }
          console.log(obj, 'obj')
          infoWindow(obj)
          function infoWindow(obj) {
            var picked = viewer.scene.pick(obj.position)
            if (Cesium.defined(picked)) {
              var id = Cesium.defaultValue(picked.id, picked.primitive.id)
              if (id instanceof Cesium.Entity) {
                $('.cesium-selection-wrapper').show()
                $('#trackPopUpLink').empty()
                $('#trackPopUpLink').append(obj.content)
                function positionPopUp(c) {
                  var x = c.x - ($('#trackPopUpContent').width()) / 2
                  var y = c.y - ($('#trackPopUpContent').height())
                  $('#trackPopUpContent').css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)')
                }
                var c = new Cesium.Cartesian2(obj.position.x, obj.position.y)
                $('#trackPopUp').show()
                positionPopUp(c) // Initial position
                $('.leaflet-popup-close-button').click(function () {
                  $('#trackPopUp').hide()
                  $('#trackPopUpLink').empty()
                  $('.cesium-selection-wrapper').hide()
                  return false
                })
                return id
              }
            }
          }
        } else {
          $('#trackPopUp').hide()
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

      // 绑定地图移动
      handler3D.setInputAction(function (movement) {
        $('#trackPopUp').hide()
      }, Cesium.ScreenSpaceEventType.LEFT_UP)
      // 绑定地图缩放
      handler3D.setInputAction(function (movement) {
        $('#trackPopUp').hide()
      }, Cesium.ScreenSpaceEventType.WHEEL)
      // 绑定滚轮点击事件
      handler3D.setInputAction(function (movement) {
        $('#trackPopUp').hide()
      }, Cesium.ScreenSpaceEventType.MIDDLE_DOWN)
    }
  }
}
</script>
<style lang="scss" scoped>
.trackPopUp {
    display: none;
    color: rgb(255, 255, 255);
    height: 50px;
}

.leaflet-popup {
    position: absolute;
}

.leaflet-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 4px 0 0;
    text-align: center;
    font: 25px/25px Tahoma, Verdana, sans-serif;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-weight: bold;
    background: transparent;
}

.leaflet-popup-content-wrapper {
    max-height: 200px;
    overflow-y: auto;
    height: 133px;
    padding: 1px;
    text-align: left;
    border-radius: 12px;
    background-image: url('../../../images/worldimage.jpg');
}

.leaflet-popup-content {
    margin: 5px 20px;
    line-height: 1.4;

}
.leaflet-popup-content div{
    text-align: center;
}

    .leaflet-popup-content div {
        font-size: 18px;
    }

    .leaflet-popup-content table {
        margin-top: 15px;
    }

        .leaflet-popup-content table tr {
            height: 25px;
        }
</style>
